@charset 'utf-8';

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1474784065'); /* IE9*/
  src: url('iconfont.eot?t=1474784065#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1474784065') format('woff'), /* chrome, firefox */
  url('iconfont.ttf?t=1474784065') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1474784065#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.icon-yonghu:before { content: "\e60e"; }
.icon-11:before { content: "\e606"; }
.icon-wenjian:before { content: "\e632"; }
.icon-wenjian1:before { content: "\e7b2"; }
.icon-xingxing:before { content: "\e60c"; }
.icon-fenxiang:before { content: "\e681"; }
.icon-3:before { content: "\e617"; }
.icon-fangxiang:before { content: "\e64e"; }
.icon-down:before { content: "\e66d"; }
.icon-left:before { content: "\e66e"; }
.icon-sanjiao:before { content: "\e619"; }
.icon-wendang:before { content: "\e6db"; }

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	background:#EEEEED;
}
//变量开始
$toph: 55px;
//变量结束



//合并样式开始
%left{
	float: left;
}
%right{
	float: right;
}
%inline-block{
	display: inline-block;
}
%height100{
	height: 100%;
}
%width100{
	width: 100%;
}
%heiti{
	font-family: 'SimHei';
}
%font-style1{
	font-size: 12px;
	font-family: '微软雅黑';
	color: #C2C2C1;
}
%font-style2{
	font-size: 12px;
	font-family: '微软雅黑';
	color: #535353;
}
//合并样式结束



//mixin可似乎
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
@mixin pos ($pos: relative, $top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: $pos;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}
@mixin box-shadow($shadow...){
    -webkit-box-shadow:$shadow;
       -moz-box-shadow:$shadow;
            box-shadow:$shadow; 
}
@mixin select($width){
	appearance:none;  
  -moz-appearance:none;  
  -webkit-appearance:none; 
  background: url(../img/select.png) no-repeat $width - 13px;
  height:26px;
  font-size:12px;
  font-family: 'SimHei';
  color: #323232;
  outline:none;
  border:1px solid #ccc;
  padding:0 5px;
  margin:5px 10px;
  width:$width;
}
//mixin结束
//function开始
@function width-percentage($total,$value){
	@return 100% / $total * $value;
}
//function结束
.wrap{
	width: 1280px;
	position: relative;
	margin:0 auto;
}

/*top开始*/
.top{
	@include pos(fixed, 0, 0, auto, 0);
	height: $toph;
	background:#2189BF;
	z-index: 100;
	h1{
		@extend %inline-block;
		width: 86px;
		height: 100%;
		background: url(../img/logo.png) right center no-repeat;
	}
	.input-group{
		@extend %right;
		@extend %height100;
		@include pos(relative);
		width: 312px;
		margin: 0 20px;
		

		button{
			@include pos(absolute, $top:50%, $left:10px);
			transform: translate(0, -50%);
			background: transparent;
			color: #E3E3E3;
			font-size: 25px;
			cursor: pointer;
		}
		input{
			$height: 28px;
			@extend %width100;
			height: $height;
			margin-top: ($toph - $height) / 2;
			@include border-radius($height);
			padding-left: 35px;
		}
	}
	.login{
		@extend %right;
		@extend %height100;
		background: transparent;
		color: #fff;
		margin-right: 90px;
		cursor: pointer;
	}
}
/*top结束*/

/*aside开始*/
aside{
	width: 260px;
	@extend %height100;
	@extend %left;
	margin-top: $toph;
	background:#2A2E3D;
	height: 1213px;
	header{
		@extend %height100;
		height: 150px;
		h2{
			height: 50%;
			text-align: left;
			padding:2px 35px;
			.head-portrait{
				@extend %inline-block;
				width: 47px;
				height: 47px;
				background: #BABABE;
				@include border-radius(50%);
				@include pos(relative);
				vertical-align:middle;
				margin:16px;
				&:after{
					content: "";
					width: 52px;
					height: 52px;
					border: 2px solid #BABABE;
					@include pos(absolute,$top:-4px,$left:-4px);
					@include border-radius(50%);
				}
			}
			.user-name{
				@extend %inline-block;
				font-size: 16px;
				@extend %heiti;
				color: #BABABE;
			}
		}
		p{
			height: 50%;
			text-align: center;
			span{
				@extend %inline-block;
				@extend %heiti;
				font-size: 16px;
				color: #6D8095;
				padding: 10px 40px;
				position: relative;
			}
			span:first-child:after{
				content: "";
				@include pos(absolute,10px,0,10px,0);
				border-right: 1px solid #6D8095;
			}
		}
	}
	a{
		font-size: 12px;
		color: #6D8095;
		@extend %heiti;
	}
	nav {
		padding-left: 40px;
		ul li {
			padding: 20px 0;
			ul{
				padding-left: 20px;
				li{
					padding: 10px 0;
					a{
						&:before{
							content: "\e64e";
							font-family: 'iconfont';
							font-size: 12px;
						}
					}
				}
			} 
		} 
	}
}
/*aside结束*/



/*main开始*/
.main{
	width: 1020px;
	padding: 50px 70px 0 60px;
	@include pos(absolute,$top:$toph,$left:260px);
	.path{
		@include pos(absolute,0,0,auto,0);
		height: 31px;
		background: #fff;
		padding: 5px 40px;
		color: #AAAAA9;
		a{
			font-size: 12px;
			color: #AAAAA9;
			padding: 0 5px;
			&:last-child{
				color: #B3CBE0;
			}
		}
	}
	& > div:not(.path){
		margin: 10px 0;
	}
	.query{
		background: #fff;
		padding:5px 10px;
		@extend %width100;
		div{
			padding: 0 10px;
		}
		label{
			font-size: 12px;
			color: #AAAAA9;
			font-family: 'SimHei';
		}
		.option{
			@extend %left;
			select{
				@include select(71px);
			}
		}
	}
	
	.trader{
		@extend %left;
		position: relative;
		width: 200px;
		background: url(../img/change.png) no-repeat right;
		select{
			@include select(121px);
		}
		.change{
			color: #fff;
			@include pos(absolute,$right:1%,$top:36%);
		}
	}
	.details{
		@extend %left;
		width: 330px;
		.date{
			@include select(121px);
		}
		.times{
			@include select(71px);
		}
		.persons{
			@include select(71px);
		}
		.count{
			@include select(121px);
		}
	}
	div.search{
		@extend %left;
		padding-top: 22px;
		button{
			width: 51px;
			height: 26px;
			background: #388AC1;
			color: #fff;
			@include border-radius(3px);
		}
	}
	.hostory{
		@extend %width100;
		height: 65px;
		& > div{
			@extend %left;
			@extend %height100;
			&:not(last-child){
				padding-right: 5px;
			}
			div{
				@extend %height100;
				background: #fff;
				text-align: center;
			}
		}
		.left,.right{
			width: width-percentage(16,1);
			line-height: 65px;
			font-size:25px;
			color: #535353;
		}
		.item{
			width: width-percentage(16,2);
			.active{
				border-top: 4px solid #4388C9;
			}
			.time{
				font-size: 12px;
				font-family: '微软雅黑';
				color: #323232;
				line-height:2.5em;
			}
			.money {
				span{
					font-size: 16px;
					color: #aaa;
				}
				strong{
					font-size: 21px;
					font-family: '微软雅黑';
					color: #EB6400;
					font-weight: normal;
				}
			}
		}
		div.record{
			width: width-percentage(16,2);
			padding-right: 0;
			div{
				font-size: 12px;
				color: #535353;
				font-family: '微软雅黑';
				line-height: 65px;
				background: #fff url(../img/history.png) no-repeat 5px center;
				text-indent: 25px;
			}
		}
	}
	& > p{
		font-size: 12px;
		color: #323232;
		font-family: '微软雅黑';
	}
	.statistics{
		height: 71px;
		position: relative;
		.item{
			width: 201px;
			@extend %height100;
			background: #fff;
			padding: 12px;
			div{
				width: 50%;
				@extend %left;
				p{
					font-family: 'SimHei';
					line-height: 2.5em;
				}
				.num{
					font-size: 12px;
					color: #323232;
				}
				.text{
					font-size: 10px;
					color: #AAAAA9;
				}
			}
			.right{
				width: 61px;
				@extend %height100;
				@extend %right;
			}
		}
		@for $i from 1 to 5{
			.item-#{$i}{
				@include pos(absolute,0,$left:25.8% * ($i - 1));
			}
		}
		.item-1{
			border-left: 4px solid #43B29E;
			.right{
				background:#43B29E;	
			}
		}
		.item-2{
			border-left: 4px solid #388BC2;
			.right{
				background:#388BC2;	
			}
		}
		.item-3{
			border-left: 4px solid #D04B36;
			.right{
				background:#D04B36;	
			}
		}
		.item-4{
			border-left: 4px solid #E2CD47;
			.right{
				background:#E2CD47;	
			}
		}
	}
	.project{
		.panel{
			background: #fff;
			@include border-radius(5px);
			box-shadow: 2px 2px 2px #ccc;
			border: 1px solid #ccc;
			margin:5px 0;
			
			.title{
				height: 41px;
				@include border-radius(5px);
				background:#F4F5F7;
				font-family: 'SimHei';
				font-size: 12px;
				color: #AAAAA9;
				padding-left: 10px;
				line-height: 41px;
				border-bottom: 1px solid #F4F5f0;
			}
		}
		.material{
			width: 531px;
			height: 357px;
			@extend %left;
			.body{
				padding: 10px 15px;
				ul li{
					@extend %left;
					margin-right: 5px;
					a{
						font-family: '微软雅黑';
						font-size: 12px;
						color: #535353;
						display: inline-block;
						width: 75px;
						height: 25px;
						background: #EDEDEF;
						text-align: center;
						line-height: 25px;
						@include border-radius(3px 3px 0 0);
						&.active{
							background: #fff;
							border: 1px solid #CBCBCB;
							border-bottom: none;
							position: relative;
							top: 1px;
						}
					}
				}
				.table{
					border: 1px solid #CBCBCB;
					@include border-radius(3px);
					text-align: center;
					width: 491px;
					height: 254px;
					table{
						margin: 37px auto;
						td{
							border: 1px solid #CBCBCB;
							vertical-align:center;
							width: 100px;
							height: 30px;
							font-family: 'SimSun';
							font-size: 12px;
							color: #535353;
						}
					}	
				}
			}
		}
		.presentation{
			width: 351px;
			height: 357px;
			@extend %right;
			.body{
				padding: 12px 40px;
				header{
					h2{
						@extend %font-style1;
					}
					h3{
						@extend %font-style2;
					}
				}
				div.price{
					border-top: 1px solid #DDDDDD;
					border-bottom: 1px solid #DDDDDD;
					div{
						display:inline-block;
						&:first-child{
							width: 90px;
							border-right: 1px solid #DDDDDD;
						}
						p{
							@extend %font-style1;
							line-height:3.5em;
						}
						div{
							@extend %font-style2;
						}
					}
				}
				div.detailed{
					h4{
						@extend %font-style1;
					}
					span{
						@extend %font-style2;
						display: inline-block;
						@extend %width100;
						height: 127px;
						border-bottom: 1px solid #DDDDDD;
					}
				}
				footer{
					@extend %font-style1;
					padding: 5px 0;
					input{
						@extend %left;
						outline:none;
						margin-top:2px;
					}
					button{
						@extend %right;
						color: #fff;
						background: #388AC1;
						width: 51px;
						height: 26px;
						@include border-radius(5px);
						cursor: pointer;
					}
				}
			}
		}
		.date{
			width: 351px;
			height: 357px;
			@extend %left;
			.body{
				padding: 5px 20px;
				.date-top{
					padding: 8px 0;
					div{
						display: inline-block;
						text-align:center;
						font-size: 12px;
						color: #535353;
						font-family: 'SimHei';
						border: 1px solid #CECFCF;
						height: 22px;
						padding: 0 4px;
						cursor: pointer;
						span{
							width: 0;
							height: 0;
							border: 4px solid transparent;
							border-top-color: #CFCFD0;
							position: relative;
							top: 8px;
							margin-left: 8px;
						}
					}
					.year{
						width: 63px;
					}
					.month{
						width: 84px;
					}
					.day{
						width: 75px;
					}
					.today{
						width: 73px;
					}
				}
			}
			ul{
				padding: 5px 0;
				border-top: 1px solid #A9CFEC;
				border-bottom: 1px solid #E1E1E2;
				li{
					text-align: center;
					@extend %left;
					width:width-percentage(7,1);
					font-size: 12px;
					font-family: 'SimHei';
					color: #535353;
				}
			}
			.calendar{
				.mask{
					border: 1px solid #FFCC33;
				}
				p{
					display: inline-block;
					width:width-percentage(7,1);
					height: 43px;
					@extend %left;
					text-align: center;
					font-size:12px;
					color: #323232;
					font-family: 'SimHei';
					cursor: pointer;
					span{
						display: block;
					}
					i{
						display: block;
						font-style:normal;
					}
					.red{
						color: red;
					}
				}
			}
		}
		.brand{
			width: 531px;
			height: 357px;
			@extend %right;
			.body{
				padding: 5px 5px;
				table{
					text-align: center;
					font-size: 12px;
					font-family: 'SimHei';
					color: #323232;
					td,th{
						height: 27px;
						border: 1px solid #DDDEDE;
						padding: 0 20px;
						& > div.progress{
							width: 170px;
							height: 5px;
							background: #DCDCDC;
							margin-left: 10px;
							.dazhong{
								width: 90%;
								height: 5px;
								background: #FF00FF;
							}
							.fengtian{
								width: 85%;
								height: 5px;
								background: #9933FF;
							}
							.aodi{
								width: 82%;
								height: 5px;
								background: #00FF33;
							}
							.bentian{
								width: 80%;
								height: 5px;
								background: #3366FF;
							}
							.fute{
								width: 77%;
								height: 5px;
								background: #CC0066;
							}
							.baoma{
								width: 74%;
								height: 5px;
								background: #9999FF;
							}
							.xiandai{
								width: 70%;
								height: 5px;
								background: #66FF33;
							}
							.qiya{
								width: 65%;
								height: 5px;
								background: #666600;
							}
							.benchi{
								width: 62%;
								height: 5px;
								background: #330000;
							}
							.bieke{
								width: 55%;
								height: 5px;
								background: #CC3300;
							}
						}
						& > div{
							display: inline-block;
						}
					}

				}
			}
		}
	}
}

/*main结束*/